<template>
  <section class="page-container is-form" v-if="model">
    <div class="app-container__body">
      <h3 class="block-title">店铺信息</h3>
      <div class="form-wrapper">
        <div class="form-row">
          <div class="form-item__label">店铺名称</div>
          <div class="form-item__content text-form">
            <p class="item-p">{{model.name}}</p>
            <a-button class="item-a" @click="onSetName">设置名称</a-button>
          </div>
        </div>
<!--        <div class="form-row">-->
<!--          <div class="form-item__label">店铺地址</div>-->
<!--          <div class="form-item__content text-form">-->
<!--            <p class="item-p">{{model.linkUrl}}&nbsp;</p>-->
<!--            <a-button class="item-a btn-copy" @click='handleCopy(model.linkUrl,$event)'>复制链接</a-button>-->
<!--          </div>-->
<!--        </div>-->
        <div class="form-row">
          <div class="form-item__label">店铺Logo</div>
          <div class="form-item__content text-form">
            <p class="item-p">
              <img v-if="model.logo" :src="model.logo" class="logo-img" />
              <img v-else src="../../assets/images/mainImage.jpg" class="logo-img" />
            </p>
            <a-button class="item-a" @click="onSetLogo">设置logo</a-button>
          </div>
        </div>
      </div>
    </div>
    <a-modal top="2vh" title="设置名称" v-model="dialogNameVisible" :footer="null" width="700px" :maskClosable="false" @cancel="handleClose">
      <a-form :form="form">
        <a-form-item label="店铺名称">
          <a-input type="text" v-decorator="['name']" placeholder="店铺名称"></a-input>
        </a-form-item>
        <a-form-item>
          <a-button type="primary" @click="onSave" :loading="isFormLoading"> 保 存 </a-button>
        </a-form-item>
      </a-form>
    </a-modal>

    <a-modal top="2vh" title="设置logo" v-model="dialogLogoVisible" :footer="null" width="700px" :maskClosable="false" @cancel="handleClose">
      <a-form :form="form">
        <a-form-item label="设置logo">
          <a-upload :showUploadList="false" :action="uploadAction" :beforeUpload="beforeUpload" @change="handleChange">
            <div class="logo-uploader">
              <img v-if="editPublishing.logo" :src="editPublishing.logo" class="logo-image"  />
              <a-icon v-else type="cloud-upload" style="font-size:50px;color:#999;margin-top:30px;"></a-icon>
            </div>
          </a-upload>
          <p class="default_tips">建议图片尺寸160*160像素，JPG、PNG格式，小于100KB</p>
          <a-input type="hidden" v-decorator="['logo',{rules: [{ required: true, message: '请上传LOGO图片!' }]}]" />
        </a-form-item>
        <a-form-item>
          <a-button type="primary" @click="onSave" :loading="isFormLoading" :disabled="editPublishing.isSave"> 保 存 </a-button>
        </a-form-item>
      </a-form>
    </a-modal>
  </section>
</template>
<script>

import {getCompanyInfo,saveCompany } from "../../api/template";
import { getUploadFileRequest } from "../../api/index";
import clip from '../../utils/clipboard'

  export default {
    components:{},
    data(){
      return{
        model:{},
        form: this.$form.createForm(this),
        isLoading:false,
        isFormLoading:false,
        dialogNameVisible:false,
        dialogLogoVisible:false,
        editPublishing:{
          name:'',
          logo:'',
          isSave:true,
        },
        uploadAction:getUploadFileRequest(),
      }
    },
    methods:{
      onSetName(){
        this.dialogNameVisible = this.editPublishing.isSave = true;
        this.$nextTick(()=>{
          this.form.setFieldsValue({'name':this.model.name})
        })
      },
      handleClose(){
        this.dialogNameVisible = false;
        this.dialogLogoVisible = false;
      },
      async onSave(){
        this.isFormLoading = true;
        this.form.validateFields(async (err,values) => {
              if (!err) {
                let resp = await saveCompany({...this.model,...values});
                if(this.qUtil.validResp(resp)){
                  this.dialogNameVisible = false;
                  this.dialogLogoVisible = false;
                  this.isFormLoading = false;
                  this.$message.success("保存成功")
                  this.loadData();
                }else this.$message({ message: resp.msg || '保存失败', type: 'warning' });
              }else{
                this.isFormLoading = false;
              }
            },
        )
      },
      handleCopy(text, event) {
        clip(text, event)
        //this.$message.success("已复制到剪贴板")
      },
      onSetLogo(){
        this.editPublishing = {...this.model}
        this.dialogLogoVisible = this.editPublishing.isSave = true;
        this.$nextTick(()=>{
          this.form.setFieldsValue({'logo':this.model.logo})
        })
      },
      beforeUpload(file, fileList){
        const isJPG = file.type === 'image/jpeg';
        const isPNG = file.type === 'image/png';
        const isGif = file.type === 'image/gif';
        if (!isJPG && !isPNG && !isGif) {
          this.$message.error('图片格式错误,请检查后重新上传!');
          return false;
        }
        const isLt100KB = file.size / 1024 / 100
        if (!isLt100KB) {
          this.$message.error('图片大小不合适,请上传小于100KB的图片!');
          return false;
        }
        return true;
      },
      handleChange({file, fileList}) {
        if(file.status === 'error'){
          return;
        }
        else if(file.status === 'done') {
          // 根据服务端返回数据筛选上传成功的文件
          if (file.response) {
            this.editPublishing.logo = file.response.data;
            this.form.setFieldsValue({'logo':file.response.data});
            this.editPublishing.isSave = false;
          }
        }
      },
      async loadData(){
        let resp = await getCompanyInfo()
        if(this.qUtil.validResp(resp)){
          this.model = resp.data
        }
      }
    },
    mounted(){
      this.loadData()
    }
  }
</script>
<style scoped>
  .form-wrapper{
    display: block;
  }
  .form-row{
    display: flex;
    line-height: 36px;
    margin-bottom:10px;
  }
  .form-row .form-item__label{
    flex-grow: 0;
    width:100px;
    font-size:14px;
    font-weight: bolder;
    color:#666;
  }
  .form-row .form-item__content{
    flex-grow: 1;
    text-align: left;
  }
  .text-form{
    position: relative;
  }
  .text-form .item-p{
    margin:0;
    padding:0 0 10px;
    line-height: 37px;
    border-bottom:1px solid #F2F2F2;
  }
  .text-form .item-a{
    position: absolute;
    right:10px;
    top:5px;
    cursor: pointer;
    color:#2BB89A;
  }
  .text-form .logo-img{
    width:50px;
    height:50px;
    border-radius:100%;
    border:1px solid #f2f2f2;
  }
  .logo-uploader{
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    text-align: center;
    width:120px;
    height:120px;
  }
  .logo-uploader .logo-image {
    width: 120px;
    height: 120px;
    display: block;
  }
</style>
